<template>
  <el-container style="height: 1000px;">
  <el-header class="oneheader">
    <el-row>
      <el-col :md="1"><img class="log" src="../assets/Logo.png"/></el-col>
      <el-col :md="1" :offset="21">
        <div @click="updata_avater()">
        <el-avatar title="点击修改头像" class="header_avatar" :size="50" :src="imageUrl" @click="updata_avater()"></el-avatar>
        </div>
      </el-col>
    </el-row>
  </el-header>
  <el-main style="padding-top: 0px;">
    <el-row>
      <el-col class="" :md="4"><p></p></el-col>
      <el-col class="vantacol" :md="16" style="width: 1253px;">
        <!-- 背景 -->
          <div class="myvanta" ref='vantaRef'>
            
            <div class="mydiv"></div>
            <div style="height: 10px;"></div>
            <div class="userdiv">
              <el-row>
                
                <el-col :md="2">
                  <div @click="updata_avater()">
                    <el-avatar class="avatar" :size="60" :src="imageUrl" title="点击修改头像"></el-avatar>
                  </div>
                </el-col>
                <!-- 弹出框 -->
                <el-dialog
                title="提示"
                :modal-append-to-body="false"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                  <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:10001/file/uploadavatar"
                  name="file"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateavatar()">确 定</el-button>
                </span>
              </el-dialog>
                <el-col :md="5">
                  <!-- 名称 -->
                  <span class="u-name">{{name}}</span>
                  <!-- 个性签名 -->
                  <el-input id="signature" v-model="input" @blur="blur(input)" @input="test()" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-header class="towheader" style="padding-right: 0px;padding-left: 0px;">
            <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal">
              <el-menu-item index="/system/userindex"><span id="iconspan" class="iconfont icon-homefill" style="color: #0c9;"/><span class="textspan">主页</span></el-menu-item>
              <el-menu-item index="/system/toeindex"><span class="iconspan el-icon-s-custom" style="color: #f33"/><span class="textspan">个人中心</span></el-menu-item>
              <!-- <el-menu-item index="3" disabled>消息中心</el-menu-item> -->
              <el-menu-item index="/system/threeindex"><span class="iconspan el-icon-s-platform" style="color: #938"/><span class="textspan">IT技能</span></el-menu-item>
              <el-menu-item index="/system/oudindex"><span class="iconspan el-icon-s-tools" style="color: #2df"/><span class="textspan">设置</span></el-menu-item>
            </el-menu>
          </el-header>
          <el-row>
            <el-col :md="17">
              <el-main class="towmain">
                <router-view ref="child" @childClick="childClick"></router-view>
              </el-main>
            </el-col>
            <el-col :md="5">
                <el-card shadow="always" class="card">
                  公告
                  <el-input
                    @blur="updatanotice()"
                    class="text"
                    type="textarea"
                    :rows="15"
                    placeholder="请输入内容"
                    v-model="textarea"
                    >
                  </el-input>
                </el-card>
                
            </el-col>
          </el-row>
      </el-col>
      <el-col :md="4"><p></p></el-col>
    </el-row>
    
  </el-main>
</el-container>
  <!-- <div class="home"> -->
  <!-- </div> -->
</template>

<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.clouds'
// import BIRDS from 'vanta/src/vanta.net'

export default {
  data(){
    return {
      dialogVisible: false,
      // textarea: '',
      activeIndex: '/system/userindex',
      name: '',
      imageUrl: '',
      input: '',
      textarea: ''
    }
  },
  methods:{
    updatanotice(){
      // console.log(this.textarea)
      this.$http.post("updatenotice",{notice:this.textarea}).then(res => {
        // console.log(res.data)
      })
    },
    blur(input){
      // updatasignature
        this.$http.post("updatasignature",{signature:input}).then(res => {
          // console.log(res.data)
        })
    },
    childClick(name){
			// console.log('接收子路由传来的值= '+e)
      this.name = name;
		},
    get:function(){
      // 请求
      this.$http.get("all").then(res =>{
        this.name=res.data[0].name;
        this.input = res.data[0].signature
        this.imageUrl = res.data[0].avatar
        // this.textarea = res.data[0].notice
      })
      this.$http.get("redis").then(res =>{
        // console.log(res.data.message);
        this.textarea = res.data.message
      })
    },


    updata_avater(){
      this.dialogVisible=true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
        this.$http.post("uodateavatar",{avatar:res}).then(res => {
          
        })
        
      },
    updateavatar(){
      this.dialogVisible = false
      this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          position: 'bottom-right'
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    }
  },
  mounted() {
    this.get()
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      // skyColor: 0x91cde3,
      // cloudColor: 0xc9c9d9,
      // cloudShadowColor: 0x174b7d,
      // sunColor: 0xe37f05,
      // speed: 1.50
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>
<style>
.text textarea{
  min-height: 33px;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  margin-top: 10px;
  resize:none;
}
.log{
  height: 60px; 
  width: 60px;
}
.textspan{
  margin-left: 5px;
}
#iconspan{
  font-size: 25px;
}
.iconspan{
  font-size:25px;
}
.el-main{
  height: 300px;
}
 .oneheader {
    box-shadow: 0 0 10px rgb(170, 170, 170);
    /* background-color: #292929; */
    /* color: #333; */
    text-align: center;
    line-height: 56px;
  }
.vantacol{
    height: 200px;
    box-shadow: 0 0 10px rgb(170, 170, 170);
}
.mydiv{
  /* background-color: black; */
  height: 18px;
  /* left: 100px; */
  box-shadow: 0px 10px 15px -10px rgb(170, 170, 170) inset;
}
.userdiv{
  text-align: left;
  height: 75px;
  padding-top: 109px;
  
}
.avatar{
  border: 2px solid #eee;
  margin-left: 20px;
  text-align: left;
}
.header_avatar{
  border: 2px solid #eee;
  margin-top: 5px;
}
.towheader{
  
  box-shadow: 0 0 10px rgb(170, 170, 170);
  /* text-align: center; */
  /* line-height: 66px; */
}
.towmain{
  /* width: 800px; */
  height: 640px;
  /* background-color: aqua; */
  box-shadow: 0 0 10px rgb(170, 170, 170);
  padding-top: 0px;
  margin-top: 20px;
}
.card{
  box-shadow: 0 0 10px rgb(170, 170, 170);
  margin-top: 20px;
  width: 345px;
  height: 400px;
  margin-left: 20px;
}
.u-name{
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-shadow: 2px 3px 1px rgb(170, 170, 170);/*添加字体文字的阴影*/
  margin-left: 18px;
}
#signature{
  background: transparent;
  width: 232px;
  height: 22px;
  margin-top: 15px;
  border: none;
  color: rgba(255, 255, 255, 0.76);
}

/* 头像相关 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
